<!--
 * @Description: 字典类型
 * @Author: Liu Zhiwang
 * @Date: 2021-04-09 11:49:17
 * @LastEditTime: 2022-07-13 19:35:34
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" @addForm="addForm" @search="search">
      <el-date-picker
        v-model="listQuery.startDate"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="选择开始时间"
        :picker-options="pickerFindStartDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-date-picker
        v-model="listQuery.endDate"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="请选择结束时间"
        :picker-options="pickerFindEndDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-button
        class="search-btn"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="search">查询</el-button>
      <el-button
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetListQuery">重置</el-button>
      <el-button
        v-permission-button="publicConfig['ITPS-ADD']"
        size="mini"
        class="operation-btn"
        type="primary"
        icon="el-icon-plus"
        @click="addForm">新增</el-button>
    </filter-form>
    <div class="content">
      <!-- 标题栏 -->
      <div class="content-header">
        <div class="content-header-vertical-bar" />
        <div class="content-msg">设备总台数<span>{{ this.counts.totle }}</span>台</div>
        <div class="content-msg">封存<span>{{ this.counts.news }}</span>台</div>
        <div class="content-msg">良好<span>{{ this.counts.goods }}</span>台</div>
        <div class="content-msg">老化<span>{{ this.counts.old }}</span>台</div>
        <div class="content-msg">报废<span>{{ this.counts.waste }}</span>台</div>
      </div>
      <!-- 标题栏 -->
    </div>
    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor"
        @view="view"
        @updateForm="updateForm"
        @deleteData="deleteData">
        <template slot="operations" slot-scope="{row}">
          <el-button
            title="附件"
            size="mini"
            class="el-icon-defined"
            icon="el-icon-upload"
            @click.native="showFile(row)" />
        </template>
      </base-table>
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->

    <!-- 新增或编辑弹框 -->
    <DataAddOrEdit :dialog="dialog" @updateData="updateData" />

    <!-- 查看弹框 -->
    <DataLook :dialog="dialog" :dialog-look="dialogLook" />
    <!-- 附件 -->
    <appendix-files ref="appendixFiles" :model="fileModal" />
  </div>
</template>
<script>
import {
  getListPage,
  deleteData,
  geConuts,
  addOrEditData
} from '@/api/cms/equipment/divceAttr/1CEquipment'
import {
  getList,
  getTypeListPage
} from '@/api/cms/equipment/divceAttr/index'
import { tableMixin } from '@/utils/public'
import { findAllUnitDeptList, findBelongDept } from '@/api/platform'
import DataAddOrEdit from './components/2CDataAddOrEdit'
import DataLook from './components/2CDataLook'
import AppendixFiles from './components/appendixFiles'

import { parseTime } from '@/utils'
export default {
  components: {
    DataAddOrEdit,
    DataLook,
    AppendixFiles
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,
      unitDeptCode: '',
      // 顶部操作栏配置
      filterData: {
        deptId: {
          key: 'deptId',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            if (vm) {
              this.unitDeptCode = vm
              this.tableData.tableList = []
              this.listQuery = {
                page: 1,
                size: 20,
                deptId: vm,
                divceTypeId: '',
                producerId: '',
                startDate: null,
                endDate: null,
                typeNo: '002'
              }
              this.getLists() // 加载下拉信息列表
              this.getListPage() // 查询列表信息
              this.getconut()
            }
          }
        },
        divceTypeId: {
          clearable: true,
          key: 'divceTypeId',
          type: 'select',
          title: '固组单位',
          placeholder: '请选择固组单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' }
        },
        producerId: {
          clearable: true,
          key: 'producerId',
          type: 'select',
          title: '生产厂家',
          placeholder: '请选择生产厂家',
          options: [],
          props: { label: 'eqtName', value: 'id' }
        }
      },

      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        deptId: '',
        divceTypeId: '',
        producerId: '',
        startDate: null,
        endDate: null,
        typeNo: '002'
      },
      // 时间区间选择
      pickerFindStartDate: this.handleFindStartDate(),
      pickerFindEndDate: this.handleFindEndDate(),
      // 统计集合
      counts: {
        totle: '',
        news: '',
        goods: '',
        old: '',
        waste: ''
      },
      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'deptName', label: '使用单位' },
          { prop: 'divceName', label: '设备名称' },
          { prop: 'divceType', label: '设备型号' },
          { prop: 'divceNumber', label: '设备编号' },
          { prop: 'installLocation', label: '存放位置' },
          { prop: 'state', label: '设备状态' },
          { prop: 'divceTypeName', label: '固组单位' },
          { prop: 'divceDate', label: '投运日期', formatter: row => parseTime(row.divceDate, '{y}-{m}-{d}') },
          { prop: 'producerName', label: '设备厂家' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '210px',
        defaultOperations: ['view', 'edit', 'delete'],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 添加/编辑弹框
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          lineList: []
        },
        form: {
          deptAttr: {},
          deptList: [] // 使用单位数组
        },
        initForm: {
          deptAttr: {},
          deptList: [] // 使用单位数组
        },
        rules: {
          deptName: [{ required: true, message: '必填', trigger: 'blur' }],
          divceType: [{ required: true, message: '必填', trigger: 'blur' },
            { min: 1, message: '大于1个字符', trigger: 'blur' },
            { max: 20, message: '小于20个字符', trigger: 'blur' }],
          divceNumber: [{ required: true, message: '必填', trigger: 'blur' },
            { min: 1, message: '大于1个字符', trigger: 'blur' },
            { max: 20, message: '小于20个字符', trigger: 'blur' }],
          divceState: [{ required: true, message: '必填', trigger: 'change' }],
          deptId: [{ required: true, message: '必填', trigger: 'change' }],
          divceTypeId: [{ required: true, message: '必填', trigger: 'change' }],
          installLocation: [{ required: true, message: '必填', trigger: 'blur' }],
          // producerName: [{ required: true, message: '必填', trigger: 'change' }],
          // divceDate: [{ required: true, message: '必填', trigger: 'change' }],
          typeId: [{ required: true, message: '必填', trigger: 'change' }],
          divceName: [{ required: true, message: '必填', trigger: 'blur' }],
          carId: [{ required: true, message: '必填', trigger: 'blur' },
            { min: 1, message: '大于1个字符', trigger: 'blur' },
            { max: 20, message: '小于20个字符', trigger: 'blur' }],
          divceAge: [{ required: false, message: '必填', trigger: 'blur' },
            { pattern: /^[1-9][0-9]?(\.\d)?$/, message: '百年以内小数点后一位' }],
          remark: [{ max: 300, message: '300', trigger: 'blur' }]
        }
      },
      // 附件
      fileModal: {
        title: '',
        visible: false,
        id: ''
      },
      // 查看弹框
      dialogLook: {
        visible: false
      },
      deptAttr: {},
      deptList: [] // 使用单位数组
    }
  },
  created() {
    this.initPage()
  },
  mounted() {},
  methods: {
    // 查询发现开始日期控制
    handleFindStartDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.endDate) {
            return new Date(self.listQuery.endDate) - 8.64e6 < time.getTime()
          }
        }
      }
    },
    // 查询发现结束日期控制
    handleFindEndDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.startDate) {
            return new Date(self.listQuery.startDate) - 8.64e7 > time.getTime()
          }
        }
      }
    },
    /**
     * 附件
     */
    showFile(row) {
      this.fileModal = {
        visible: true,
        divceId: row.id,
        data: row
      }
      this.$nextTick(() => {
        this.$refs.appendixFiles.initPage(row)
      })
    },
    initPage() {
      // 获取单位 deptList
      findAllUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.filterData['deptId'].options = response.data
          this.unitDeptCode = response.data[0].deptNo
          this.listQuery.deptId = response.data[0].deptNo
        }
        this.getLists()
        this.getListPage()
        this.getconut()
      })
    },
    // 获取下拉数据、字典
    getLists() { // 获取固组单位 getStates
      findBelongDept({}).then(response => {
        this.filterData.divceTypeId.options = Object.freeze(response.data)
      })
      // 获取单位
      getList({}).then(response => {
        this.filterData.producerId.options = Object.freeze(response.data)
      })
    },
    getconut() {
      geConuts(this.listQuery).then(response => {
        this.counts.waste = response.data.waste
        this.counts.old = response.data.old
        this.counts.goods = response.data.good
        this.counts.news = response.data.news
      })
    },

    // 查询信息列表
    getListPage() {
      this.tableData.loading = true
      getListPage(this.listQuery).then(response => {
        this.tableData.tableList = response.data.records
        this.tableData.total = response.data.total
        this.counts.totle = response.data.total
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },

    // 新增
    addForm() {
      //  this.dialog.form.deptAttr=this.
      this.dialog.form = []
      const dialog = {
        title: '添加',
        type: 'add',
        visible: true,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(this.dialog.form)),
        dataList: {
          lineList: this.dialog.dataList.lineList
        }

      }

      this.dialog = Object.assign(this.dialog, dialog)

      this.dialog.form.producerName = ''
      this.dialog.form.producerId = ''
      this.dialog.form.contactsPhone = ''
      this.dialog.form.contacts = ''
    },
    // 编辑
    updateForm(row, index) {
      this.currentRow = [row]
      row.deptAttr = row.sysno
      const dialog = {
        title: '编辑',
        type: 'edit',
        visible: true,
        disabled: false,
        loading: false,
        dataList: {
          lineList: this.dialog.dataList.lineList
        },
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },

    view(row, index) { // 查看
      this.currentRow = [row]
      const dialog = {
        title: '查看',
        type: 'look',
        visible: false,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
      this.dialogLook.visible = true
    },

    // 查询
    search() {
      this.listQuery.page = 1
      this.listQuery.typeNo = '002'
      this.getListPage()
      this.getconut()
    },

    // 新增或编辑弹框$emit 回调方法
    updateData(formData) {
      const param = Object.assign({}, formData)
      addOrEditData(param)
        .then((response) => {
          this.currentRow = [response.data]
          if (this.dialog.type === 'add') {
            // this.tableData.tableList.unshift(this.currentRow[0])
            // this.tableData.total++
            this.notifiySuccess('添加成功')
            var dialog = this.dialog
            dialog.form.id = response.data.id
            this.dialog = Object.assign(this.dialog, dialog)
            this.search()
          } else {
            // const index = this.tableData.tableList.findIndex(
            //   (item) => item.id === this.currentRow[0].id
            // )
            // this.tableData.tableList.splice(
            //   index,
            //   1,
            //   JSON.parse(JSON.stringify(this.currentRow[0]))
            // )
            this.search()
            this.$forceUpdate()
            this.notifiySuccess('保存成功')
          }
          this.dialog.loading = false
          this.dialog.visible = false
        })
        .catch((_) => {
          this.dialog.loading = false
        })
    },

    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.updateData(row, 2)
    },

    // 删除
    deleteData(row, index) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          deleteData(row.id).then(response => {
            this.notifiySuccess('删除成功!')
            this.search()
          })
        })
        .catch(() => {})
    },

    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },

    // 重置查询
    resetListQuery() {
      this.listQuery = {
        page: 1,
        size: 20,
        deptId: '',
        divceTypeId: '',
        producerId: '',
        startDate: null,
        endDate: null,
        typeNo: '002'
      }
      this.tableData.tableList = []
      this.filterData['divceTypeId'].options = []
      this.filterData['producerId'].options = []
      this.initPage()
    }
  }
}
</script>
<style scoped lang="scss">

.filter-form__container .el-form .eldateNewS{
  margin-bottom:10px ;
}
.filter-form__container .el-form .eldateNewS, .filter-form__container .el-form .el-input__inner {
    height: 28px;
      line-height: 28px;
    font-size: 14px;
}
  .content-header {
    height: 36px;
    display: flex;
    align-items: center;
    .content-header-vertical-bar {
      width: 7px;
      height: 26px;
      background: #409eff;
      border-radius: 4px;
      margin-right: 13px;
    }
    .content-header-title {
      font-size: 28px;
      margin-right: 30px;
    }
    .content-msg {
      width: 162px;
      height: 28px;
      margin-right: 18px;
      line-height: 26px;
      color: #323232;
      font-size: 14px;
      text-align: center;
      background: #F7FBFF;
      border: 1px solid #E3E3E3;
      border-radius: 14px;
      span {
        color: #F44B53;
        font-size: 16px;
      }
    }
    .operation-btn-div {
      position: absolute;
      right: 28px;
      .operation-btn {
        padding: 10px 20px 10px 20px;
        margin-left: 11px;
        color: #2d6dd4;
        background-color: #e2f0fd;
        border-radius: 4px;
        border: none;
      }
      .operation-btn:hover {
        padding: 10px 20px 10px 20px;
        margin-left: 11px;
        color: #2d6dd4;
        background-color: #b0d1f0;
        border-radius: 4px;
        border: none;
      }
    }
  }
</style>

